<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <div class="indexTitle">巡查、质量统计</div>
                    <div class="contentsize">详情</div>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="addtitle">
                <div>详情</div>
                <div>
                    <el-button type="primary" @click="backForm" class="searchcolor">返回</el-button>
                </div>
            </div>
            <el-form ref="searchform" :model="searchform" label-width="100px" :inline="true">
                <el-form-item label="时间：">
                    <el-col :span="11">
                        <el-date-picker
                            type="date"
                            placeholder="选择日期"
                            v-model="searchform.starTime"
                            value-format="yyyy-MM-dd"
                            style="width: 100%"
                            clearable
                        ></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align: center">至</el-col>
                    <el-col :span="11">
                        <el-date-picker
                            placeholder="选择日期"
                            v-model="searchform.endTime"
                            style="width: 100%"
                            value-format="yyyy-MM-dd"
                            type="date"
                            clearable
                        ></el-date-picker>
                    </el-col>
                </el-form-item>
                <div style="float: right">
                    <el-button type="primary" @click="onSearch" icon="el-icon-search" class="searchcolor">查询</el-button>
                </div>
                <div style="clear: both"></div>
                <div id="myChart" class="righttop" ref="charts"></div>
            </el-form>
        </div>
    </div>
</template>
<script>
import { StatisticsProblemInfo } from '@/api/index';
export default {
    name: 'echartsdetail',
    data() {
        return {
            searchform: {
                type: '',
                problem: '',
                projectId: '',
                starTime: null,
                endTime: null
            },
            checklist: []
        };
    },
    methods: {
        // 返回上一页
        backForm() {
            this.$router.back();
        },
        // 获取当前的数据
        StatisticsProblemInfo(data) {
            StatisticsProblemInfo(data).then((res) => {
                if (res.code == 200) {
                    this.checklist = res.data;
                    let xnum = [];
                    let ynum = [];
                    res.data.map((mapItem) => {
                        xnum.push(mapItem.problem);
                        ynum.push(mapItem.number);
                    });
                    console.log(xnum);
                    this.drawLine('巡查,质量统计详情', xnum, ynum);
                    console.log(res.data);
                } else {
                    this.checklist = [];
                }
            });
        },
        // 搜索
        onSearch() {
            if (this.searchform.starTime == null && this.searchform.endTime != null) {
                this.$message.error('请选择开始时间！！');
            } else if (this.searchform.starTime != null && this.searchform.endTime == null) {
                this.$message.error('请选择结束时间！！');
            } else {
                this.StatisticsProblemInfo(this.searchform);
            }
        },
        // 获取点击以及数据列表
        drawLine(title, xdata, ydata) {
            console.log(this.$echarts);
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.charts);
            // 绘制图表
            myChart.setOption({
                title: { text: title },
                tooltip: {},

                grid: {
                    show: true, //是否显示直角坐标系网格。[ default: false ]
                    borderColor: '#c45455', //网格的边框颜色
                    bottom: '30%' //
                },
                xAxis: {
                    data: xdata,
                    axisLabel: {
                        //坐标轴刻度标签的相关设置。
                        formatter: function (params) {
                            var newParamsName = ''; // 最终拼接成的字符串
                            var paramsNameNumber = params.length; // 实际标签的个数
                            var provideNumber = 2; // 每行能显示的字的个数
                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                            /**
                             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                             */
                            // 条件等同于rowNumber>1
                            if (paramsNameNumber > provideNumber) {
                                /** 循环每一行,p表示行 */
                                for (var p = 0; p < rowNumber; p++) {
                                    var tempStr = ''; // 表示每一次截取的字符串
                                    var start = p * provideNumber; // 开始截取的位置
                                    var end = start + provideNumber; // 结束截取的位置
                                    // 此处特殊处理最后一行的索引值
                                    if (p == rowNumber - 1) {
                                        // 最后一次不换行
                                        tempStr = params.substring(start, paramsNameNumber);
                                    } else {
                                        // 每一次拼接字符串并换行
                                        tempStr = params.substring(start, end) + '\n';
                                    }
                                    newParamsName += tempStr; // 最终拼成的字符串
                                }
                            } else {
                                // 将旧标签的值赋给新标签
                                newParamsName = params;
                            }
                            //将最终的字符串返回
                            return newParamsName;
                        }
                    }
                },
                yAxis: {},
                series: [
                    {
                        name: '销量',
                        type: 'bar',
                        data: ydata
                    }
                ],
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        start: 0,
                        zoomLock: true,
                        bottom: -10,
                        end: 60 //初始化滚动条
                    }
                ]
            });
            //让图表自适应
            window.addEventListener('resize', function () {
                myChart.resize(); // myChart 是实例对象
            });
        }
    },
    mounted() {
        console.log(this.$route.params);
        this.searchform = this.$route.params;
        this.StatisticsProblemInfo(this.searchform);
    }
};
</script>
<style>
</style>
<style scoped>
.righttop {
    margin: auto;
    /* width: 100%;
    height: 100%; */
    width: 1200px;
    height: 500px;
}
.container {
    overflow: hidden;
}
.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}
.indexTitle {
    margin-bottom: 20px;
}
.contentsize {
    font-size: 18px;
    font-weight: 700;
}
.handle-box {
    overflow: hidden;
}
.addtitle {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
</style>